{extend name="common/base" /}
<!--title-->
{block name="titlekeyword"}
<title>{$content}</title>

{/block}

<!---头部特色css  开始-->
{block name="titleStyle"}
<style>
canvas{
	display: block;
	margin:50px auto;
	box-shadow: -2px -2px 2px #efefef,5px 5px 5px #b9b9b9; /*阴影*/
}
</style>
{/block}
<!---头部特色css  结束-->

<!--代码主要内容-->
{block name="main"}
<h6>内容</h6>

<canvas id="chess" width="450px" height="450px"></canvas>

<!-- -->
<pre>
	<h5>html</h5>
	&lt;canvas id="chess" width="450px" height="450px"&gt;&lt;/canvas&gt;
	<br/>
	<h5>css</h5>
    canvas{
		display: block;
		margin:50px auto;
		box-shadow: -2px -2px 2px #efefef,5px 5px 5px #b9b9b9; /*阴影*/
	}
	<h5>javascript</h5>
	var chess = document.getElementById('chess');
/*画图必须 */
var context = chess.getContext('2d');

context.strokeStyle = "#BFBFBF";

for (var i=0; i<15; i++){
/**画竖线开始 从 (15，15) 到(435 435) 是一条. (30，15) 到(435,435) 是第二条  */
context.moveTo(15 + i*30,15);
context.lineTo(15 + i*30,435);
context.stroke();
/**画竖线 结束 */

/**画横线开始 从 (15,15) 到(435,435)..      */
context.moveTo(15 ,15 + i*30);
context.lineTo(435,15 + i*30);
context.stroke();
/**画横线 结束 */
}


</pre> {/block}
<!--底部js 在这里是js的实际代码区-->
{block name="footjs"}
<script language="javascript">
var chess = document.getElementById('chess');
/*画图必须 */
var context = chess.getContext('2d');

context.strokeStyle = "#BFBFBF";

for (var i=0; i<15; i++){
/**画竖线开始 从 (15，15) 到(435 435) 是一条. (30，15) 到(435,435) 是第二条  */
context.moveTo(15 + i*30,15);
context.lineTo(15 + i*30,435);
context.stroke();
/**画竖线 结束 */

/**画横线开始 从 (15,15) 到(435,435)..      */
context.moveTo(15 ,15 + i*30);
context.lineTo(435,15 + i*30);
context.stroke();
/**画横线 结束 */
}

</script> {/block}